<template>
  <div>
    ==={{ answer }}
    <span
      v-for="(item, index) in RightAnswer"
      :key="index"
      :class="show[index].answer"
      >{{ index + 1 }}:<span>{{ show[index].msg }}</span>
    </span>
  </div>
</template>

<script>
export default {
  created() {
    this.$bus.$on("RightAnswer", (data) => {
      console.log(data);
      this.RightAnswer = data;
    });
  },
  mounted() {
    this.$bus.$on("answer", (data) => {
      console.log(data, "data");
      console.log(this, "this");
      // this.answer[0]=data[0];
      // this.answer[1]=data[1];
      // this.answer[2]=data[2];
      // this.answer[3]=data[3];
      // this.answer[4]=data[4];
      // this.answer = data;
      this.$set(this.answer, 0, data[0]);
      this.$set(this.answer, 1, data[1]);
      this.$set(this.answer, 2, data[2]);
      this.$set(this.answer, 3, data[3]);
      this.$set(this.answer, 4, data[4]);
    });
  },
  beforeMount() {
    this.answer.forEach((item, index) => {
      if (item === "") {
        this.show.push({
          answer: "undo",
          msg: "未完成",
        });
      } else if (item == this.RightAnswer[index]) {
        this.show.push({
          answer: "right",
          msg: "正确",
        });
      } else {
        this.show.push({
          answer: "error",
          msg: "错误",
        });
      }
    });
  },
  data() {
    return {
      RightAnswer: [],
      answer: ["", "", "", "", "", ""],
      show: [],
    };
  },
  watch: {
    answer: {
      deep: true,
      handler(newValue) {
        console.log(newValue, "watch");
        newValue.forEach((item, index) => {
          if (item === "") {
            this.$set(this.show, index, {
              answer: "undo",
              msg: "未完成",
            });
          } else if (item == this.RightAnswer[index]) {
            this.$set(this.show, index, {
              answer: "right",
              msg: "正确",
            });
          } else {
            this.$set(this.show, index, {
              answer: "error",
              msg: "错误",
            });
          }
        });
        console.log(this.show, "show");
      },
    },
  },
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>